<!-- 

 我的优惠券 
 
 -->
<template>
	<view class="collection-all-box">
		
		<scroll-view :scroll-y="true" @scrolltolower="lover">
			<cu-custom :isBack="true" bgColor="bg-fa">
				<block slot="content">我的优惠券</block>
				
			</cu-custom>
			
			<view class="coll-bar">
				<view class="bar-item" v-for="(item,index) in tabList" :key="index">
					<view class="bar-text" :class="{'bar-action':item.id == tabIndex}" @tap="switchBar(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			
			<view>
				<uni-swipe-action>
				    <!-- 基础用法 -->
				    <uni-swipe-action-item :right-options="options" @click="bindClick" :autoClose="false" v-for="item in 5" :key="item">
				    	<view class="pre-warp">
				    		<preferential-item></preferential-item>
				    	</view>
				    </uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			
			
			<!--  没有数据的时候  -->
			<view class="none-list" v-if="list.length==0">
				<image src="../../static/mine/coll.png" class="none-img"></image>
				<view class="none-text">
					您还没有任何优惠券哟~
				</view>
			</view>
			
			<!--  没有数据的时候end  -->
			
		</scroll-view>
		
		
		<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
	</view>
</template>

<script>
	import uniSwipeAction from "@/components/uni-swipe-action/uni-swipe-action.vue"
	import uniSwipeActionItem from "@/components/uni-swipe-action-item/uni-swipe-action-item.vue"
	import preferentialItem from "@/components/preferential-item.vue"
	export default {
		name:"footprint",
		data(){
			return {
				pageNo:1,
				isMore:false,
				isDelete:false,
				Allchecked:false,
				scrollTop:0,
				/*  当前是店铺页面还是商品页面  */ 
				tabIndex:1,
				
				options:[
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				
				tabList:[{id:1,name:"待使用"},{id:2,name:"已失效"}],
				
				/*  缓存数据列表  */
				allList:[{id:1,name:"待使用",pageNo:1,list:[],isMore:false},
				{id:2,name:"已失效",pageNo:1,list:[],isMore:false}],
				
				
				list:[]
			}
		},
		components:{
			uniSwipeAction,uniSwipeActionItem,preferentialItem
		},
		methods:{
			
			//  点击已删除 
			bindClick(e){
			  console.log(e)
			},
			
			
			//  滚动到底部
			 
			lover(){
				if(this.isMore){
					this.pageNo = this.pageNo + 1
					this.getList(1)
				}
			},
			   
			
			/*  顶部的按钮选择  */
			switchBar(item){
				if(this.tabIndex == item.id){
					return false
				}
				let allList = JSON.parse(JSON.stringify(this.allList))
				let newList = {}
				let oldList = {}
				let oldIndex = 0
				/*  获取新旧缓存数据  */
				for (let i = 0; i < allList.length; i++) {
					let newitem = allList[i]
					if(item.id == newitem.id){
						newList = newitem
					}
					if(this.tabIndex == newitem.id){
						oldList = newitem
						oldIndex = i
					}
				}
				
				oldList.list = this.list
				oldList.pageNo = this.pageNo
				oldList.isMore = this.isMore
				this.allList[oldIndex] = oldList
				
				this.list = newList.list
				this.isMore = newList.isMore
				this.pageNo = newList.pageNo
				this.tabIndex = item.id
			},
			
			
			/*  0 是刷新与第一次加载  1是滚动到底部加载  */
			getList(type){
				uni.stopPullDownRefresh()
				
			}
		},
		onLoad() {
			// this.getList()
		},
		
		
		
		/*  监听滚动条  */
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		}
		
	}
</script>

<style scoped lang="scss">
	page{
		background: #F0F0F0;
	}
	.collection-all-box{
		position: relative;
		width: 100%;
		
		.cu-right{
			.right-text{
				font-size: 24rpx;
				padding-right: 30rpx;
				color: #FFFFFF;
			}
		}
		
		.uni-swipe{
			margin-top: 20rpx;
		}
		.pre-warp{
			width: calc(100% - 40rpx);
			background: #FFFFFF;
			padding: 0 20rpx;
			margin-left: 20rpx;
		}
		
		.none-list{
			margin-top: 40%;
			text-align: center;
			.none-img{
				width: 240rpx;
				height: 192rpx;
			}
			.none-text{
				color: #8D8D8D;
				font-size: 28rpx;
				padding-top: 30rpx;
				.nav-to{
					color: #FA436A;
					font-size: 28rpx;
					padding-left: 8rpx;
				}
			}
		}
		
		/*  顶部tab切换  */
		
		.coll-bar{
			background: #FFFFFF;
			height: 70rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.bar-item{
				flex-grow: 1;
				width: 50%;
				height: 100%;
				text-align: center;
				.bar-text{
					color: #4B4B4B;
					font-size: 28rpx;
					height: 100%;
					line-height: 70rpx;
					width: 160rpx;
					display: inline-block;
					border-bottom: 4rpx solid transparent;
				}
				.bar-action{
					border-bottom: 4rpx solid #FA436A;
				}
			}
		}
		
		/*  顶部tab切换end  */
		
		
		
		
	}
</style>
